<!DOCTYPE html>

<html lang="en" style="height: 100%;width: 100%">

<head>

    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

    <link id="icon" rel="shortcut icon" href="../images/icon.png"/>

    <script type="text/javascript" src="../JS/elementHandler.js"></script>
    <script type="text/javascript" src="../JS/colorChange.js"></script>
    <script type="text/javascript" src="../JS/bgmController.js"></script>
    <script type="text/javascript" src="../JS/boxOpacityController.js"></script>
    <script type="text/javascript" src="../JS/boxLeaveEnterController.js"></script>
    <script type="text/javascript" src="../JS/fullScreen.js"></script>
    <link rel="stylesheet" type="text/css" href="../CS/KipKips.css">

    <title></title>

    <script>
        document.addEventListener('visibilitychange',function(){ //浏览器切换事件
            if(document.visibilityState=='hidden') { //状态判断
                //normal_title=document.title;
                document.title = '(●――●)喔呦,崩溃啦!';
                document.getElementById('a').pause();
                document.getElementById('icon').href='../images/leaveIcon.png';
            }else {
                document.title='(/≥▽≤)咦?又好了!';
                document.getElementById('icon').href='../images/icon.png';
                if(canPlay==true){
                    document.getElementById('a').play();
                }

                setTimeout(function () {
                    document.title = 'Hi,RECNEPS-KIPS';
                },2000)

            }
        });

        var dom = function(s){
            return document.getElementById(s)
        };
        dom.cssName = function (name){
            var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'],
                rcap = /-([a-z])/g,capFn = function($0,$1){
                    return $1.toUpperCase();
                };
            dom.cssName = function(name, target, test){
                target = target || document.documentElement.style;
                for (var i=0, l=prefixes.length; i < l; i++) {
                    test = (prefixes[i] + name).replace(rcap,capFn);
                    if(test in target){
                        return test;
                    }
                }
                return null;
            };
            return dom.cssName(name);
        };
        function x() {
            var el = dom("cover"),
                css3transition = dom.cssName("transition");
            el.style[css3transition] = "opacity 0.8s ease";
            el.style.opacity = "0";

            var e2 = dom("line"),
                css3transition = dom.cssName("transition");
            e2.style[css3transition] = "width 0.8s ease";
            e2.style.width = "100%";

            setTimeout(function () {
                document.getElementById("line").style.display="none";
                document.getElementById("cover").style.display="none";
            },1000);

            setTimeout(function () {
                document.getElementById("bgmOF").style.display="block";
                document.getElementById("feedOF").style.display="block";
                document.getElementById("text").style.display="block";
                document.getElementById("back").style.display="block";
                document.getElementById("full").style.display="block";
            },200);

            var e3 = dom("back"),
                css3transition = dom.cssName("transition");
            e3.style[css3transition] = "opacity 0.35s ease";

            var e4 = dom("full"),
                css3transition = dom.cssName("transition");
            e4.style[css3transition] = "opacity 0.35s ease";

            var e5 = dom("text"),
                css3transition = dom.cssName("transition");
            e5.style[css3transition] = "opacity 0.35s ease";

            var e6 = dom("feedOF"),
                css3transition = dom.cssName("transition");
            e6.style[css3transition] = "opacity 0.35s ease";

            var e7 = dom("bgmOF"),
                css3transition = dom.cssName("transition");
            e7.style[css3transition] = "opacity 0.35s ease";

            setTimeout(function () {
                e3.style.opacity = "1";
                e4.style.opacity = "1";
                e5.style.opacity = "1";
                e6.style.opacity="1";
                e7.style.opacity="1";
            },800);
        }

    </script>


    <style>

        /*button OnMouseOver闪烁动画*/
        #back:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }

        @keyframes change1{
            from{opacity: 1}
            to{opacity: 0}
        }
        @keyframes change2 {
            from{opacity: 0}
            to{opacity: 1}
        }

        #full:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #bgmOF:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #feedOF:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
    </style>
</head>

<body id="body" style="height: 100%;width: 100%" >
<audio id="a" src="../music/loop.mp3" loop onloadeddata="obj1 = this; setTimeout(function() { obj1.play(); },1020)"></audio>
<audio id="a1" src="../music/loop.mp3"  onloadeddata="obj = this; setTimeout(function() { x(); },10)"></audio>

<div id="outer" class="outer" ></div>
<canvas id="color1" class="color1"></canvas>
<div id="color" class="color"  onmousedown="allOnMouseDown()" onmousemove="o()" >

    <canvas id="change1" class="change"></canvas>
    <canvas id='change2' class='change'></canvas>
    <canvas id='change3' class='change'></canvas>
    <canvas id='change4' class='change'></canvas>
    <canvas id='change5' class='change'></canvas>
    <canvas id='change6' class='change'></canvas>
    <canvas id='change7' class='change'></canvas>
    <canvas id='change8' class='change'></canvas>
    <canvas id='change9' class='change'></canvas>
    <canvas id='change10' class='change'></canvas>
    <canvas id='change11' class='change'></canvas>
    <canvas id='change12' class='change'></canvas>
    <canvas id='change13' class='change'></canvas>
    <canvas id='change14' class='change'></canvas>
    <canvas id='change15' class='change'></canvas>
    <canvas id='change16' class='change'></canvas>
    <canvas id='opa' style="background-color: white; height: 100%;width: 100%;left: 0; top: 0;display: block;opacity: 0;position: absolute;"></canvas>


    <canvas id="box0" class="box" onmousedown="box0OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box1" class="box" onmousedown="box1OnMouseDown()" >
        <span></span>
    </canvas>
    <canvas id="box2" class="box" onmousedown="box2OnMouseDown()" >
        <span></span>
    </canvas>
    <canvas id="box3" class="box" onmousedown="box3OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box4" class="box" onmousedown="box4OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box5" class="box" onmousedown="box5OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box6" class="box" onmousedown="box6OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box7" class="box" onmousedown="box7OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box8" class="box" onmousedown="box8OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box9" class="box" onmousedown="box9OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box10" class="box" onmousedown="box10OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box11" class="box" onmousedown="box11OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box12" class="box" onmousedown="box12OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box13" class="box" onmousedown="box13OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box14" class="box" onmousedown="box14OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box15" class="box" onmousedown="box15OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box16" class="box" onmousedown="box16OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box17" class="box" onmousedown="box17OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box18" class="box" onmousedown="box18OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box19" class="box" onmousedown="box19OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box20" class="box" onmousedown="box20OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box21" class="box" onmousedown="box21OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box22" class="box" onmousedown="box22OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box23" class="box" onmousedown="box23OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box24" class="box" onmousedown="box24OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box25" class="box" onmousedown="box25OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box26" class="box" onmousedown="box26OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box27" class="box" onmousedown="box27OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box28" class="box" onmousedown="box28OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box29" class="box" onmousedown="box29OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box30" class="box" onmousedown="box30OnMouseDown()">
        <span></span>
    </canvas>
    <canvas id="box31" class="box" onmousedown="box31OnMouseDown()">
        <span></span>
    </canvas>
</div>

<div id="back" class="back" onmouseover="backOnMouseOver()" onmousedown="backDown()"><</div>
<div id="full" class="full" onmouseover="fullOnMouseOver()" onmousedown="fullDown()">□</div>
<div id="text" class="text" onmouseover="textOnMouseOver()">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C L I C K&nbsp;&nbsp;&nbsp;&&nbsp;&nbsp;&nbsp;D R A G&nbsp;&nbsp;&nbsp;o r&nbsp;&nbsp;&nbsp;S W I P E&nbsp;&nbsp;&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div id="feedOF" class="feedOF" onmouseover="feedOnMouseOver()" onmousedown="feedDown()">F E E D B A C K  :  O N</div>
<div id="bgmOF"  class="bgmOF" onmouseover="bgmOnMouseOver()" onmousedown="bgmDown()">B A C K T R A C K  :  O N</div>
<div id="cover"  style="background-color: #FFAFAF;height: 100%;width: 100%;opacity: 1;position:absolute;left: 0;top: 0;"></div>
<div id="line"  style="background-color: white;height: 2px;width: 0;opacity: 0.8;position:absolute;left: 0;right: 0;top: 50%;margin: 0 auto;"></div>
</body>
</html>